<template>
  <div class="shopping-cart fixed-header fixed-footer">
    <header class="flex-middle-center bg-app">
      <div class="header-left"><a onclick="history.back()"><i class="iconfont icon-back"></i></a></div>
      方案内容
    </header>
    <div class="top-actions">
      <div class="action">
        <router-link :to="'/winlose?rule=' + rule" tag="b"><i class="iconfont icon-plus"></i> 添加/编辑方案</router-link>
      </div>
      <div class="text-grey tips py-1">{{current.lotteryNo}}期<em class="text-grey ml-4">截止: {{current.endTime}}</em>
      </div>
    </div>

    <div class="d-flex text-center bg-white p-3 mx-3" v-for="(m, i) in current.matches">
      <div class="box-xl" @click="select(i, 3)">
        <b class="text-truncate" :class="{'text-red': m.hostHot}"><small>{{m.hostRank}}</small>{{m.hostShort}}</b>
        <div class="g py-2 mt-1 bl-l bt-l" :class="{on: on(i, 3)}">主胜 <small>{{m.hostOdds}}</small></div>
      </div>
      <div class="box-xl" @click="select(i, 1)">
        <small class="text-grey">VS</small>
        <div class="g py-2 mt-1 bt-l" :class="{on: on(i, 1)}">平 <small>{{m.evenOdds}}</small></div>
      </div>
      <div class="box-xl" @click="select(i, 0)">
        <b class="text-truncate" :class="{'text-red': m.guestHot}">{{m.guestShort}}<small>{{m.guestRank}}</small></b>
        <div class="g py-2 mt-1 bt-l" :class="{on: on(i, 0)}">客胜 <small>{{m.guestOdds}}</small></div>
      </div>
    </div>

    <div class="text-grey m-3">
      <label class="ui-check"><input type="checkbox" v-model="agree"><i></i> 我已阅读并同意</label>
      <a @click.prevent="toggle('dialog')" href>《服务协议》</a>
      <a class="float-right" @click="empty">清空列表</a>
    </div>

    <popup v-model="dialog" class="dialog-lg dialog-flex" style="height: 75%">
      <div class="scroll-wrapper flex-column grow">
        <iframe class="grow" src="http://r209.chaoshenwan.com/lottery/public/faq/agreement.html"></iframe>
      </div>
      <a class="btn btn-lg btn-danger rad-0" @click="toggle('dialog')">确定</a>
    </popup>

    <checkout :disabled="!agree || !sum" :bets="sum" @checkout="checkout">
      <div class="text-grey ml-3" slot="left" v-html="tips"></div>
    </checkout>
  </div>
</template>

<script>
import { Popup } from 'vant'
import http, { checkout } from '../../http'
import { get, set } from '../../utils/stoage'
import { mixin, nothing } from './calculator'
import Checkout from '../widgets/checkout'

export default {
  components: {Popup, Checkout},
  name: 'winlose-cart',
  mixins: [mixin],
  data: () => ({
    dialog: false,
    agree: true
  }),
  beforeRouteEnter (to, from, next) {
    var rule = to.query.rule || 'sfc'
    var lotteryNo = get('winlose.no')
    if (!lotteryNo) {
      next('/winlose?rule=' + rule)
    }
    http.post('/winlose/matches', {rule, lotteryNo}).then(res => {
      next(vm => {
        vm.current = res.results.find(r => r.lotteryNo == lotteryNo)
        vm.bets = get('winlose.bets', nothing())
        vm.rule = rule
      })
    })
  },
  methods: {
    checkout (times) {
      var vm = this
      var {current, bets, rule} = vm
      var bet = bets.map(b => b.join('')).join('|')
      checkout.call(this, '/winlose/bet', 'winlose', {
          lotteryNo: current.lotteryNo, times, rule, bet
        },
        function () {
          vm.bets = nothing()
          set(`winlose.bets`, nothing())
        }, '/winlose?rule=' + rule)
    },
    empty () {
      this.$dialog.alert({
        title: '清空',
        message: '您确定要清空当前的投注内容？',
        showCancelButton: true,
        onConfirm: () => {
          this.bets = set('winlose.bets', nothing())
        }
      })
    },
    onBack () {
      history.back()
    }
  }
}
</script>
